<!DOCTYPE html>
<html lang="zxx">
    <head>
        <meta charset="UTF-8">
        <title>Cards</title>
        <meta 
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        >
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
            rel="stylesheet"
            type='text/css'
        >
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="background">
            <div class="centering">
                <div class="articles">
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=900&t=st=1687123388~exp=1687123988~hmac=f3410d0a5c2f20aec66c7d763c789bf0aae9c5026366fe41ae7d18e05e7e406b"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 1</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                Praesent in mauris eu tortor porttitor accumsan. 
                                <a href="#" class="read-more" title="Read More">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>            
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t=st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813bf06fc8b5e50f32f6503099bbd8"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 2</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                Praesent in mauris eu tortor porttitor accumsan. 
                                <a href="#" class="read-more" title="Read More">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800&t=st=1687169672~exp=1687170272~hmac=b66f9b9c1e344cbfe6fe2e5f65e94ebb8d418dad2e2af2b892ad9ac60e9eb79c"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 3</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/pathway-middle-green-leafed-trees-with-sun-shining-through-branches_181624-4539.jpg?w=900&t=st=1687123477~exp=1687124077~hmac=6e8b1735a2cb25be79f248b6a3307a37a15b080dee114565d01704b97d432a80"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 4</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>            
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/beautiful-paradise-island-with-beach-sea_74190-1023.jpg?w=1800&t=st=1687169691~exp=1687170291~hmac=7a65a4e5b2eb374e94e17fd7fb2ab0d1b7b7aaf83078cd62ed5d0a84b66d5beb"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 5</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/empty-wood-chair-table-outdoor-patio-with-beautiful-tropical-beach-sea_74190-9961.jpg?w=1800&t=st=1687169720~exp=1687170320~hmac=0a77994214a9019510f28af43dab452ada527e96585d6e7f563a09995598851e"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 6</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/view-mountains-landscape-huesca_1398-5217.jpg?w=2000&t=st=1687169991~exp=1687170591~hmac=aa445998f8b6570cab3abc9d68853ab80ba944475fcbc05c70c6061f967ab9f7"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 7</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>            
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/beautiful-shot-snowy-hill-surrounded-by-mountains-with-light-pink-sky_181624-4102.jpg?w=2000&t=st=1687169963~exp=1687170563~hmac=b811dc16315ec7776b847588539208c1d57e43df80f7319aeb9b55ed7322784b"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 8</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img
                                src="https://img.freepik.com/free-photo/beautiful_1203-2633.jpg?w=2000&t=st=1687169925~exp=1687170525~hmac=4e1fdddf8ca048eaa100d431639d165f115cd16cea95feff591fbecdc3b28d4c"
                                alt="Preview"
                            >
                        </figure>
                        <div class="article-preview">
                            <h2>My Blog 9</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. 

                                <a href="#" class="read-more">
                                    Read more
                                </a>
                            </p>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </body>
</html>




